<template>
    <el-card>
        <el-table :data="list" border style="width: 100%">
            <el-table-column prop="title" label="名称" width="100px" />
            <el-table-column prop="createtime" label="创建时间" width="150px" />
            <el-table-column prop="modifytime" label="上一次修改" width="150px" />
            <el-table-column prop="description" label="描述" />
            <el-table-column align="right" width="200px">
                <template #header>
                    <el-button type="primary" @click="dialogVisible = true; tip = '添加Robot'">添加Robot</el-button>
                </template>
                <template #default="scope">
                    <el-button size="small" @click="edit(scope.$index, scope.row)">
                        修改
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteRobot(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="width: 50%;margin: 5vh auto 0px auto;">
            <el-pagination background layout="prev, pager, next,sizes" :total=length style="margin-top:auto 5vh;"
                :hide-on-single-page="false" @current-change="handleChange" @size-change="handleSizeChange"
                :page-sizes="[10, 20, 50,]" />
        </div>
    </el-card>

    <el-dialog v-model="dialogVisible" :title=tip width="1000" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false" :show-close="false">
        <div style="margin: 0 auto;width: 80%;">
            <div>
                名称：
            </div>
            <div>
                <el-input v-model="title" style="width: 30%;" placeholder="请输入Robot名称" />
            </div>
            <div style="margin-top: 5px;">
                简介：
                <div>
                    <el-input v-model="description" style="width: 500px" autosize type="textarea"
                        placeholder="请输入Robot描述" />
                </div>
            </div>
            <el-button @click="codeBT = true" style="margin-top: 10px;">
                指南
            </el-button>
            <div style="margin-top: 5px;">
                Robot代码:
                <el-select v-model="lang" placeholder="语言" size="large" @change="langChange"
                    style="width: 240px;margin-left: 5px;height: 80%;">
                    <el-option v-for="item in langList" :key="item.key" :value="item.key" :label="item.name" />
                </el-select>
            </div>
            <div style="margin: 5px auto;">
                <VAceEditor v-model:value="content" @init="editorInit" :lang=lang theme="textmate" :options="{
                    showPrintMargin: false
                }" style="height: 300px" />
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="save()">
                    保存
                </el-button>
                <el-button @click="cancel()">取消</el-button>
            </div>
        </template>

        <el-dialog v-model="codeBT" title="代码指南" width="70%" :before-close="handleClose" :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <div class="home" style="line-height: 1.5;">
                RobotsField是一款在线的程序对抗平台,AI 可以根据游戏规则进行比赛一决胜负。
                <div>
                    本平台基于贪吃蛇,但是有些许改动<br>
                    <span style="    font-size: 30px;
    font-weight: 1000;">游戏规则：</span><br>
                    本游戏为回合制游戏，双方可以控制自己的蛇，每个回合通过WASD或者代码执行方式(见后文)给出蛇的前进方向。<br>
                    注意蛇出生将随机出生在左下角或者右上角。当双方都给出蛇的前进方向时，蛇将会向指定方向前进，并进入到下一回合。<br>
                    前10回合每回合长度增加1，从第11回合开始，每3回合长度增加1。<br><br>
                    <span class="title1">代码执行：<br></span>
                    目前支持Java、Python、C/C++<br>
                    <span class="title2">
                        通用输入方法<br>
                    </span>
                    <span>对于各种不同的语言，只要写出补全预先定义好的nextMove函数就可以实现控制蛇的行走方向<br></span>
                    <span>&nbsp;&nbsp;&nbsp;例如C/C++方式:</span>
                    <div>
                        <pre class="code">
                        int nextMove(int map[][14], int myX, int myY, int oppoX, int oppoY, int steps[]){
                        return 0;
                        }
                    </pre>
                        <span class="title2">地图坐标方向:<br></span>
                        <span>
                            向上0，向右1，向下2，向左3<br>
                        </span>
                        <div style="text-align: center;">
                            <el-image style="width: 50%; height: 50%"
                                src="http://robot.jlyproject.cn/8f90b7b8-478d-4374-98e6-1d065407bd04.png" :fit="fit" />
                        </div>
                        <span class="title2">参数解释：</span>
                        <div>
                            map[][14] : 用一个二维数组给出当前一个13x14的地图，地图上有障碍物的格子为1,其他为0，对于双方蛇当前占用的格子同样为1。<br>
                            myX:当前自己蛇头处于x坐标位置。<br>
                            myY:当前自己蛇头处于y坐标位置。<br>
                            oppoX:当前对方头处于x坐标位置。<br>
                            oppoY:当前对方头处于y坐标位置。<br>
                            steps[]:蛇行走的方向序列。<br>
                        </div>
                    </div>
                </div>
                <div>
                    <span class="title1">简单样例<br></span>
                    <pre class="code">
                    int nextMove(int map[][14], int myX, int myY, int oppoX, int oppoY, int steps[]){
                    if (map[myX-1][myY] == 0) { // 上方
                    return 0;
                    }
                    if (map[myX][myY+1] == 0) { // 右方
                    return 1;
                    }
                    if (map[myX+1][myY] == 0) { // 下方
                    return 2;
                    }
                    if (map[myX][myY-1] == 0) { // 左方
                    return 3;
                    }
                    return 0;
                    }
                </pre>
                </div>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="codeBT = false">
                        了解
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </el-dialog>



    <el-dialog v-model="deleteDialog" title="删除Robot" width="500" :before-close="handleClose">
        <div style="margin: 0 auto;width: 50%;">
            确定要删除这个Robot吗
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="danger" @click="deleteConfirm()">
                    确定
                </el-button>
                <el-button @click="deleteDialog = false">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';
import 'ace-builds/src-noconflict/mode-c_cpp';
import 'ace-builds/src-noconflict/mode-java';
import 'ace-builds/src-noconflict/mode-python';
export default {
    name: "userBotShowComponents",
    components: {
        VAceEditor,
    },
    setup() {
        ace.config.set(
            "basePath",
            "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")

        let list = ref();
        let length = ref(0);
        let dialogVisible = ref(false);
        let tip = ref('');
        let title = ref("");
        let description = ref("");
        let content = ref();

        let state = ref('add');
        let rid = ref("");
        let did = ref('');
        let nowSize = ref(10);

        let deleteDialog = ref(false);

        let nowPage = ref(1);
        let codeBT = ref(false);

        let langList = ref([
            {
                name: "C",
                key: "c",
            },
            {
                name: "C++",
                key: "c_cpp",
            },
            {
                name: "Java",
                key: "java",
            },
            {
                name: "Python",
                key: "python",
            },]);
        let lang = ref('');

        let langPlaceHold = ref([
            `int nextMove(int map[][14], int myX, int myY, int oppoX, int oppoY, int steps[]){
    
    return 0;
} 
`,
            `int nextMove(int map[][14], int myX, int myY, int oppoX, int oppoY, int steps[]){
        
    return 0;
}`,
            `
public class game {
    public Integer nextMove(int[][] map, int myX, int myY, int oppoX, int oppoY, int[] steps) 
    {
        return 0;
    }
} 
`,
            `
def nextMove(map,myX,myY,oppoX,oppoY,steps):
    return 0
            `,
        ])

        let langChange = () => {
            if (lang.value == "c") {
                content.value = langPlaceHold.value[0];
            } else if (lang.value == "c_cpp") {
                content.value = langPlaceHold.value[1];
            } else if (lang.value == "java") {
                content.value = langPlaceHold.value[2];
            } else if (lang.value == "python") {
                content.value = langPlaceHold.value[3];
            }
        }
        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3000/robotCRUD/show/",
                cache: false,
                async: false,
                headers: {
                    "satoken": localStorage.getItem("token"),
                },
                data: {
                    page: nowPage.value,
                    size: nowSize.value,
                },
                success(resp) {
                    list.value = resp.robot;
                    length.value = resp.length;
                }
            });
        }
        getInfo();

        let save = () => {
            if (state.value == "add") {
                $.ajax({
                    type: "post",
                    url: "http://124.221.73.180:3000/robotCRUD/add/",
                    cache: false,
                    async: false,
                    headers: {
                        "satoken": localStorage.getItem("token"),
                    },
                    data: {
                        title: title.value,
                        description: description.value,
                        content: content.value,
                        lang: lang.value,
                    },
                    success(resp) {
                        console.log(resp);
                    }
                });
            } else if (state.value == "update") {
                $.ajax({
                    type: "post",
                    url: "http://124.221.73.180:3000/robotCRUD/update/",
                    cache: false,
                    async: false,
                    headers: {
                        "satoken": localStorage.getItem("token"),
                    },
                    data: {
                        id: rid.value,
                        title: title.value,
                        description: description.value,
                        content: content.value,
                        lang: lang.value,
                    },
                    success() {

                    }
                });
            }
            console.log(state.value);
            getInfo();
            clear();
            dialogVisible.value = false;
        }
        let clear = () => {
            title.value = '';
            description.value = '';
            content.value = '';
            lang.value = '';
            state.value = "add";
        }
        let edit = (id, row) => {
            rid.value = row.id;
            state.value = "update";
            tip.value = "修改Robot";
            title.value = row.title;
            description.value = row.description;
            content.value = row.content;
            dialogVisible.value = true;
            lang.value = row.lang;

        }
        let handleClose = () => {
            clear();
            deleteDialog.value = false;
            dialogVisible.value = false;
        }
        let deleteRobot = (id, row) => {
            did.value = row.id;
            deleteDialog.value = true;
        }
        let deleteConfirm = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3000/robotCRUD/delete/",
                cache: false,
                async: false,
                headers: {
                    "satoken": localStorage.getItem("token"),
                },
                data: {
                    id: did.value,
                },
                success() {

                }
            });
            getInfo();
            deleteDialog.value = false;
        }
        let cancel = () => {
            clear();
            title.value = '';
            description.value = '';
            content.value = '';
            dialogVisible.value = false;
        }

        let handleChange = (page) => {
            nowPage.value = page;
            getInfo();
            goTop();
        }
        let handleSizeChange = (size) => {
            nowSize.value = size;
            getInfo();
            goTop();
        }
        let goTop = () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
        return {
            codeBT,
            list,
            dialogVisible,
            title,
            description,
            content,
            tip,
            cancel,
            deleteDialog,
            langList,
            lang,
            length,
            nowPage,
            nowSize,
            langPlaceHold,
            langChange,

            handleClose,
            handleSizeChange,
            handleChange,
            deleteConfirm,
            edit,
            deleteRobot,
            save,
            getInfo,
        }
    }
}

</script>
<style scoped>
el-dialog div {
    font-size: larger;
}

.ace_editor :deep(.ace_print-margin) {
    visibility: hidden;
}

.code {
    padding: 16px;
    font-size: 85%;
    line-height: 1.45;
    background-color: rgb(246, 248, 250);
    font-family: Consolas, monospace;
}

.title1 {
    font-size: 30px;
    font-weight: 1000;
}

.title2 {
    font-size: 24px;
    font-weight: 500;
}
</style>